<template>
	<j-modal :title="title" :width="width" :visible="visible" :confirmLoading="confirmLoading" switchFullscreen @ok="handleOk"
	 @cancel="handleCancel" cancelText="关闭">
		<a-spin :spinning="confirmLoading">
			<a-form :form="form">

				<a-form-item label="订单编号" :labelCol="labelCol" :wrapperCol="wrapperCol">
					<a-input v-decorator="['orderCode']" placeholder="请输入订单编号"></a-input>
				</a-form-item>
				<a-form-item label="订单名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
					<a-input v-decorator="['orderName']" placeholder="请输入订单名称"></a-input>
				</a-form-item>
				<a-form-item label="物料料号" :labelCol="labelCol" :wrapperCol="wrapperCol">
					<a-input v-decorator="['materielCode']" placeholder="请输入物料料号"></a-input>
				</a-form-item>
				<a-form-item label="物料名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
					<a-input v-decorator="['materielName']" placeholder="请输入物料名称"></a-input>
				</a-form-item>
				<a-form-item label="物料规格" :labelCol="labelCol" :wrapperCol="wrapperCol">
					<a-input v-decorator="['materielGague']" placeholder="请输入物料规格"></a-input>
				</a-form-item>
				<!-- <a-form-item label="领用数量" :labelCol="labelCol" :wrapperCol="wrapperCol">
					<a-input v-decorator="['occupyNum']" placeholder="请输入领用数量"></a-input>
				</a-form-item> -->
				<a-form-item label="单位" :labelCol="labelCol" :wrapperCol="wrapperCol">
					<a-input v-decorator="['unit']" placeholder="请输入单位"></a-input>
				</a-form-item>
				<a-form-item label="发料人" :labelCol="labelCol" :wrapperCol="wrapperCol">
					<a-input v-decorator="['occupyPerson']" placeholder="请输入发料人"></a-input>
				</a-form-item>
				<a-form-item label="发料时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
					<j-date placeholder="请选择发料时间" v-decorator="['occupyTime']" :trigger-change="true" :show-time="true" date-format="YYYY-MM-DD HH:mm:ss"
					 style="width: 100%" />
				</a-form-item>

			</a-form>
		</a-spin>
	</j-modal>
</template>

<script>
	import {
		httpAction
	} from '@/api/manage'
	import pick from 'lodash.pick'
	import {
		validateDuplicateValue
	} from '@/utils/util'
	import JDate from '@/components/jeecg/JDate'


	export default {
		name: "MesMaterielOccupyModal",
		components: {
			JDate,
		},
		data() {
			return {
				form: this.$form.createForm(this),
				title: "操作",
				width: 800,
				visible: false,
				model: {},
				labelCol: {
					xs: {
						span: 24
					},
					sm: {
						span: 5
					},
				},
				wrapperCol: {
					xs: {
						span: 24
					},
					sm: {
						span: 16
					},
				},
				confirmLoading: false,
				validatorRules: {},
				url: {
					add: "/storage/mesMaterielOccupy/add",
					edit: "/storage/mesMaterielOccupy/edit",
				}
			}
		},
		created() {},
		methods: {
			add() {
				this.edit({});
			},
			edit(record) {
				this.form.resetFields();
				this.model = Object.assign({}, record);
				this.visible = true;
				this.$nextTick(() => {
					this.form.setFieldsValue(pick(this.model, 'createBy', 'createTime', 'orderCode', 'orderName', 'materielCode',
						'materielName', 'materielGague', 'occupyNum', 'occupyPerson', 'occupyTime','unit'))
				})
			},
			close() {
				this.$emit('close');
				this.visible = false;
			},
			handleOk() {
				const that = this;
				// 触发表单验证
				this.form.validateFields((err, values) => {
					if (!err) {
						that.confirmLoading = true;
						let httpurl = '';
						let method = '';
						if (!this.model.id) {
							httpurl += this.url.add;
							method = 'post';
						} else {
							httpurl += this.url.edit;
							method = 'put';
						}
						let formData = Object.assign(this.model, values);
						console.log("表单提交数据", formData)
						httpAction(httpurl, formData, method).then((res) => {
							if (res.success) {
								that.$message.success(res.message);
								that.$emit('ok');
							} else {
								that.$message.warning(res.message);
							}
						}).finally(() => {
							that.confirmLoading = false;
							that.close();
						})
					}

				})
			},
			handleCancel() {
				this.close()
			},
			popupCallback(row) {
				this.form.setFieldsValue(pick(row, 'createBy', 'createTime', 'orderCode', 'orderName', 'materielCode',
					'materielName', 'materielGague', 'occupyNum', 'occupyPerson', 'occupyTime','unit'))
			},


		}
	}
</script>
